<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/hohoplay/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/hohoplay">
        <img src="~@/assets/hohoplay/common/back.png">
      </router-link>
    </div>
    <div class="type">
        <img src="~@/assets/hohoplay/common/dabiaoti.png">
    </div>
    <div class="left">
      <img v-if="!leftend" @click="toggleTabs('dec')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img v-if="!rightend" @click="toggleTabs('add')" src="~@/assets/images/common/right.png">
    </div>
    <ul class="ul-item">
      <li class="li-item" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="setCur(item)">{{item.text}}</li>
    </ul>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
import play1 from './play1'
import play2 from './play2'
import play3 from './play3'
import play4 from './play4'
import play5 from './play5'
import play6 from './play6'
export default {
  name: 'base',
  data () {
    return {
      flag: 0,
      leftend: 0,
      rightend: 0,
      currentIndex: 1,
      currentView: 'hohoplay-play1',
      tabs: [{
        isSelected: 1,
        name: 'hohoplay-play1',
        text: '一级'
      }, {
        isSelected: 0,
        name: 'hohoplay-play2',
        text: '二级'
      }, {
        isSelected: 0,
        name: 'hohoplay-play3',
        text: '三级'
      }, {
        isSelected: 0,
        name: 'hohoplay-play4',
        text: '四级'
      }, {
        isSelected: 0,
        name: 'hohoplay-play5',
        text: '五级'
      }, {
        isSelected: 0,
        name: 'hohoplay-play6',
        text: '六级'
      }]
    }
  },
  components: {
    'hohoplay-play1': play1,
    'hohoplay-play2': play2,
    'hohoplay-play3': play3,
    'hohoplay-play4': play4,
    'hohoplay-play5': play5,
    'hohoplay-play6': play6
  },
  created () {
    let that = this
    that.currentView = 'hohoplay-play1'
    if (that.$route.query.compoent !== undefined) {
      // 传入参数时修改
      that.currentView = that.$route.query.compoent
      this.currentIndex = parseInt(that.$route.query.compoent.substr(-1))
      this.tabs.forEach(item => {
        item.isSelected = (item.name === that.$route.query.compoent)
      })
    }
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.flag = 1
      if (this.currentIndex === 1) {
        this.leftend = 1
      } else {
        this.leftend = 0
      }
      if (this.currentIndex === 5) {
        this.rightend = 1
      } else {
        this.rightend = 0
      }
    } else if (this.$store.state.jurisdiction === 2) {
      this.flag = 2
      if (this.currentIndex === 2) {
        this.leftend = 1
      } else {
        this.leftend = 0
      }
      if (this.currentIndex === 6) {
        this.rightend = 1
      } else {
        this.rightend = 0
      }
    } else if (this.$store.state.jurisdiction === 3) {
      this.flag = 3
      if (this.currentIndex === 1) {
        this.leftend = 1
      } else {
        this.leftend = 0
      }
      if (this.currentIndex === 6) {
        this.rightend = 1
      } else {
        this.rightend = 0
      }
    }
  },
  methods: {
    setCur: function (selectedItem) {
      if (this.flag === 1) {
        if ((selectedItem.text === '二级') || (selectedItem.text === '四级') || (selectedItem.text === '六级')) {
          alert('暂未开放！')
        } else {
          this.currentView = selectedItem.name
          this.currentIndex = parseInt(this.currentView.substr(-1))
          if (this.currentIndex === 1) {
            this.leftend = 1
          } else {
            this.leftend = 0
          }
          if (this.currentIndex === 5) {
            this.rightend = 1
          } else {
            this.rightend = 0
          }
          this.tabs.forEach(item => {
            item.isSelected = (item.name === selectedItem.name)
          })
        }
      } else if (this.flag === 2) {
        if ((selectedItem.text === '一级') || (selectedItem.text === '三级') || (selectedItem.text === '五级')) {
          alert('暂未开放！')
        } else {
          this.currentView = selectedItem.name
          this.currentIndex = parseInt(this.currentView.substr(-1))
          if (this.currentIndex === 2) {
            this.leftend = 1
          } else {
            this.leftend = 0
          }
          if (this.currentIndex === 6) {
            this.rightend = 1
          } else {
            this.rightend = 0
          }
          this.tabs.forEach(item => {
            item.isSelected = (item.name === selectedItem.name)
          })
        }
      } else if (this.flag === 3) {
        this.currentView = selectedItem.name
        this.currentIndex = parseInt(this.currentView.substr(-1))
        if (this.currentIndex === 1) {
          this.leftend = 1
        } else {
          this.leftend = 0
        }
        if (this.currentIndex === 6) {
          this.rightend = 1
        } else {
          this.rightend = 0
        }
        this.tabs.forEach(item => {
          item.isSelected = (item.name === selectedItem.name)
        })
      }
    },
    toggleTabs: function (func) {
      if (func === 'add') {
        this.leftend = 0
        if (this.flag !== 3) {
          if (this.flag === 1) {
            if (this.currentView !== 'hohoplay-play5') {
              this.currentIndex = this.currentIndex + 2
              if (this.currentIndex === 5) {
                this.rightend = 1
              }
              this.currentView = 'hohoplay-play' + this.currentIndex
            }
          } else {
            if (this.currentView !== 'hohoplay-play6') {
              this.currentIndex = this.currentIndex + 2
              if (this.currentIndex === 6) {
                this.rightend = 1
              }
              this.currentView = 'hohoplay-play' + this.currentIndex
            }
          }
        } else {
          if (this.currentView !== 'hohoplay-play6') {
            this.currentIndex = this.currentIndex + 1
            if (this.currentIndex === 6) {
              this.rightend = 1
            }
            this.currentView = 'hohoplay-play' + this.currentIndex
          }
        }
      } else {
        this.rightend = 0
        if (this.flag !== 3) {
          if (this.flag === 1) {
            if (this.currentView !== 'hohoplay-play1') {
              this.currentIndex = this.currentIndex - 2
              if (this.currentIndex === 1) {
                this.leftend = 1
              }
              this.currentView = 'hohoplay-play' + this.currentIndex
            }
          } else {
            if (this.currentView !== 'hohoplay-play2') {
              this.currentIndex = this.currentIndex - 2
              if (this.currentIndex === 2) {
                this.leftend = 1
              }
              this.currentView = 'hohoplay-play' + this.currentIndex
            }
          }
        } else {
          if (this.currentView !== 'hohoplay-play1') {
            this.currentIndex = this.currentIndex - 1
            if (this.currentIndex === 1) {
              this.leftend = 1
            }
            this.currentView = 'hohoplay-play' + this.currentIndex
          }
        }
      }
      this.tabs.forEach(item => {
        item.isSelected = (item.name === this.currentView)
      })
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  color: #999999;
  font-size: 22pt;
  background: url(~@/assets/hohoplay/common/bg1.png);
}
.root > div {
  position: absolute;
}
.ul-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 55px;
  left: 375px;
  height: 35px;
  width: 550px;
  position: absolute;
}
.li-item {
  cursor: pointer;
  float: left;
  border-right: 2px solid #000;
  height: 35px;
  padding-left: 13px;
  padding-right: 13px;
}
li:last-child{
  border-right: 0;
}
.active {
  color: #000;
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.type {
  z-index: 10;
  top: 0px;
  left: 318px;
}
.danyumu {
  position: absolute;
  left: 0px;
  top: 0;
}
.left {
  z-index: 10;
  top: 370px;
  left: 118px;
}
.right {
  z-index: 10;
  top: 370px;
  left: 1135px;
}
</style>
